<template>
    <div>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="float: left">查询条件</span>
      </div>
      <div>
        <tr>
          <td>生产部门</td>
          <td>
            <el-select v-model="depname" placeholder="请选择">
               <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td> 
          <td>用户</td>
          <td><el-input v-model="name" placeholder="请输入"></el-input></td>
          <td><el-button type="primary" @click="AttendanceStatistics" >查询</el-button></td>
          </tr>
          </div>
    </el-card>
    <div>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="people_management_id"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="people_management_name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="people_management_department_name"
      label="部门名称">
    </el-table-column>
     <el-table-column
      prop="people_management_major_id"
      label="专业">
    </el-table-column>
     <el-table-column
      label="操作">
   <a>考勤详情</a>
    </el-table-column>
  </el-table>
   <el-pagination
      @size-change="AttendanceStatistics"
      @current-change="AttendanceStatistics"
      :current-page.sync="pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
      </div>   
    </div>
</template>

<script>
import { GetAllDepartment,AttendanceStatistics } from "./AttendanceManagementApi";

  export default {
    data() {
      return {
       drop_down:[],
       tableData:[],
       depname:null,
       name:null,
       pageIndex:1,
       pageSize:10,
       totalCount:0
      }
    },
    created(){
this.GetAllDepartment();
this.AttendanceStatistics();
    },
    methods:{
         GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      })
    },
    AttendanceStatistics(){
      AttendanceStatistics(this.depname,this.name,this.pageIndex,this.pageSize).then((res)=>{
         this.tableData=res.data.list;
         this.totalCount=res.data.totalCount;
      })
    }
    }
  }
</script>